<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书管理</title>
    <link rel="stylesheet" href="../../css/my_serve.css">
    <script src="../../public/layui/layui.js"></script>
    <link rel="stylesheet" href="../../public/layui/css/layui.css">
</head>
<body>
    <div class="container">
        <table id="dataTable" lay-filter="dataTable"></table>
    </div>

    <div class="layui-btn-group" id="toolbar" style="display: none;">
        <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="show">查看借阅</button>
        <button type="button" class="layui-btn layui-btn-warm layui-btn-xs" lay-event="update">修改</button>
        <button type="button" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</button>
    </div>

    <div class="layui-btn-group layui-form-item" id="search" style="display: none">
        <div class="layui-inline">
            <label class="layui-form-label">书名</label>
            <div class="layui-input-inline">
                <input type="tel" name="phone" autocomplete="off" class="layui-input" placeholder="输入书名">
            </div>
        </div>
        <button type="button" class="layui-icon layui-btn layui-btn-normal" lay-event="add">&#xe615;搜索</button>
        <button type="button" class="layui-icon layui-btn layui-btn-normal" lay-event="deleteAll">&#xe654;Date</button>
    </div>

    <script>
        layui.use(['table'],function () {
            let table = layui.table;

            table.render({
                elem: '#dataTable',
                height: 600,
                url: 'books.json',
                page: true,
                toolbar: '#search',
                cols: [[
                    {field: 'id', title: 'ID',width: 100, sort: true, align: 'center'},
                    {field: 'name', title: '书名',width: 100, sort: true, align: 'center'},
                    {field: 'score', title: '评分', align: 'center'},
                    {field: 'author', title: '作者', align: 'center'},
                    {field: 'publisher', title: '出版社', align: 'center'},
                    {field: 'publisherDate', title: '出版日期', sort: true, align: 'center'},
                    {field: 'price', title: '价格', align: 'center'},
                    {field: 'totalBook', title: '库存', align: 'center'},
                    {field: 'toolbar', title: '操作', toolbar: '#toolbar'}
                ]]
            });
        });
    </script>
</body>
</html>